资源
正文
1. 了解动效设计中的理论跟运动规律
动效设计的意义是什么？
- 相比于静态稿，拉开设计差异
- 提升产品品质感
- 解释交互效果
- 探索产品的创新，提供灵感
互联网产品中常见的动效类型
- 提示类型
- 输入密码错误时提示框抖动
- 输入框光标闪烁
- 交互类型
- 切换页面时缓入/缓出
- 趣味类型
- 加载中的动画，让用户更加愿意去等待加载
提升动效设计细节的 6 大原则
- 挤压拉伸
- 预备动作
- 渐入渐出
- 弧线运动
- 附属运动
- 时机控制
四大变换
- 位移（快捷键
P） - 缩放（快捷键
S） - 旋转（快捷键
R） - 不透明度（快捷键
T）
2. 动效设计工具 AE 的快速入门（上）
AE 中创建一个 1000px * 1000px，帧速率为 25 的合成。
用椭圆工具建一个圆，作一个掉下又反弹的关键帧动画，选中这三个关键帧，关键帧辅助 - 缓动。
下落：受重力速度缓慢增加，落地时速度快速减至 0；反弹曲线与下落曲线对称。
再做一个圆形放大消失的缓动动画。
创建文字对象，内容为 1-9，按 Ctrl + D 复制成三排，再等距对齐。
做一个从 1-9 移动的关键帧动画。
让关键帧动画错位。
给关键帧动画增加缓动效果。
点击左下角的 展开或折叠“图层开关”窗格，给这三个文字图层都打上运动模糊。
选中这三个图层，右键 预合成，可将三个图层合并成一个。
选择 合成设置 ，若将 快门角度 提高，则会增强动态模糊的效果。
选中新的预合成，使用 矩形工具，即可在预合成上创立蒙版。
设置蒙版的羽化范围。
导出时，合成 - 添加到渲染队列。
自行选择格式导出。
最终效果（Lottie 似乎不支持动态模糊与蒙版边缘羽化）。
作业。
如果项目引用了其他地方的素材，可使用 整理工程（文件） - 收集文件... 将素材整合起来。
3. 动效设计工具 AE 的快速入门（下）
Motion 2 是一款不错的插件，将 Motion 2.jsxbin 放在 AE 安装路径下的 ScriptUI Panels 中。
重启 AE，打开 允许脚本写入文件和访问网络 和 启用 JavaScript 调试器；关闭 执行文件时警告用户。
作一个面板移入再移出的关键帧动画。
Tip
曲线口诀：出场动画用缓入，入场动画用缓出。
使用 Motion 2 插件能够快速创建缓入/缓出曲线。
作一个面板切换的关键帧动画，用 Motion 2 插件做出缓入/缓出曲线。
Motion 2 插件能够复制多个关键帧。
复制后使用 时间反向关键帧 即可实现逆序动画。
Motion 2 能够快速设定锚点。
直接选中图片，拉一个矢量图形，则会形成一个矢量蒙版。
也可在图片上选择轨道遮罩，得到与蒙版类似的效果。
所有贝塞尔曲线可在 内容 - 添加： 处选择 修建路径，建立一个修建路径动画。
修改修建路径的开始/结束参数。
模仿载入中的动画。
模仿谷歌的动画（多个关键帧错位）。
这里课程还推荐了一个 gifGun 插件，快速导出 gif。
作业（Lottie 好像又出 bug 了……）。
应该这样才对。
